<template>
    <div class="movie-detail">
        <div class="m-detail">
            <div class="mask"></div>
            <div class="m-bg" :style="{'background-image': 'url('+$options.filters.src(movieDetail.img)+')'}"></div>
            <div class="detail" @click="path( movieDetail.id)">
                <div class="poster">
                    <img :src="$options.filters.src(movieDetail.img)">
                </div>
                <div class="content">
                    <div class="title ellipsis">{{movieDetail.nm}}</div>
                    <div class="pubilc ellipsis">{{movieDetail.enm}}</div>
                    <div class="score ellipsis">
                        <span>{{movieDetail.sc}}</span>
                        <span class="snum">({{movieDetail.snum | formatNumber}})</span>
                    </div>
                    <div class="type ellipsis">
                        <span>{{movieDetail.cat}}</span>
                        <div class="type-img">
                            <span class="icon-bg imax"></span>
                        </div>
                    </div>
                    <div class="pubilc ellipsis">{{movieDetail.src}}/{{movieDetail.pn | pn}}</div>
                    <div class="pubilc ellipsis">{{movieDetail.pubDesc}}</div>
                </div>
            </div>
            <div class="m-detail-arrow" @click="path( movieDetail.id)">
                <span class="arrow-bg"></span>
            </div>
        </div>

        
    </div>
</template>

<script>
export default {
    props:{
        movieDetail:{Object,Array}
    },
    methods:{
        path(mid){
            this.$router.push({path:'/moviepage/'+mid})
        }
        
    },
    filters: {
        src(value) {
            if(value==null){
                return
            }
            return value.replace('w.h', '170.230')
        },
        formatNumber(value){
            if(value /10000 >= 10000){
                return (value/10000).toFixed(1) + "亿人评"
            }else if(value/1000 > 0){
                return (value/1000).toFixed(1) + "万人评"
            }else{
                return value + "人评"
            }
        },
        pn(value){
            return (value+10) + "分钟"
        }
    },
}
</script>

<style lang="less" scoped>

.movie-detail{
    position: relative;
    margin-top: 50px;
    .m-detail{
        position: relative;
        height: 188px;
        overflow: hidden;
        cursor: pointer;
        .mask{
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: #333;
        }
        .m-bg{
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            position: absolute;
            -webkit-filter: blur(60px);
            filter: blur(60px);
            background-size: cover;
            background-repeat: no-repeat;
            opacity: .55;
        }
        .detail{
            display: flex;
            padding: 19px 30px 19px 15px;
            height: 150px;
            .poster{
                width: 110px;
                height: 150px;
                background: url("../assets/img/maoyan-bg.png");
                background-size: 100% 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .content{
                overflow-x: hidden;
                margin-left: 12.5px;
                color: #fff;
                .ellipsis{
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                .title{
                    font-size: 20px;
                    margin-top: 2px;
                    font-weight: 700;
                    line-height: 1;
                }
                .pubilc{
                    margin-top: 8px;
                    opacity: .8;
                    font-size: 12px;
                    line-height: 1;
                }
                .score{
                    margin-top: 5px;
                    line-height: 1;
                    &>span{
                        font-size: 18px;
                        font-weight: 700;
                        color: #fc0;
                    }
                    .snum{
                        display: inline-block;
                        margin-left: 5px;
                        font-size: 12px;
                        color: #fff;
                        opacity: .8;
                    }
                }
                .type{
                    margin-top: 10px;
                    opacity: .8;
                    line-height: 1;
                    display: flex;
                    align-items: center;
                    &>span{
                        font-size: 12px;
                    }
                    .type-img{
                        display: inline-block;
                        margin-left: 5px;
                        width: 42px;
                        height: 13px;
                        vertical-align: top;
                        opacity: .85;
                        .icon-bg{
                            display: block;
                            height: 100%;
                        }
                        .sd{
                            width: 26px;
                            background: url('../assets/img/movie-tag-3D.png');
                            background-size: 100% 100%;
                        }
                        .imax{
                            width: 26px;
                            background: url('../assets/img/movie-tag-IMAX.png');
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }
        .m-detail-arrow{
            position: absolute;
            width: 10px;
            height: 14.6px;
            right: 15px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            .arrow-bg{
                display: block;
                width: 100%;
                height: 100%;
                background: url('../assets/img/arrow.png');
                background-size: cover;
            }
        }
    }
}
</style>